<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery01_02</title>
		<style type="text/css">
			.one {
				color: red;
			}
			.p0 {
				background: yellow;
			}
			.p1 {
				background: blue;
			}
			.div1 {
				width: 200px;
				height: 200px;
				background: red;
			}
			.bg {
				background: yellow;
			}
		</style>
	</head>
	<body>
		<p>hello</p>
		<p>world</p>
		<div class="div1"></div>
		<script src="JQuery/jquery-2.2.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//对元素的类名进行操作
			//♦️1.添加类:
			//1.addClass(类名)
			$("p").addClass("one");
			//2.addClass(函数)(回调)
			$("p").addClass(function(i){
				return "p" + i;
			});
			//一个元素可以添加多个类,所以针对同一个元素可以写多个addClass方法.
			
			//♦️2.删除一个类
			//1.removeClass(类名)
			$("p").removeClass("one");
			//2.
			$("p").removeClass(function(i){
				return "p" + i;
			});
			
			//♦️特殊情况(可以做开关等游戏)
			//toggleClass(类名) 如果类名存在,就删除,如果不存在,就添加.
			$(".div1").mousedown(function(){
				$(".div1").toggleClass("bg");
			});
			$(".div1").mouseup(function(){
				$(".div1").toggleClass("bg");
			});
		</script>
	</body>
</html>
